<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>北斗车辆监控平台</title>
    <!--引入公用模板-->
    <style>
        .close{
            position:absolute;
            top:0;
            right:0;
            cursor:pointer;
        }
    </style>
    <link rel="stylesheet" href="/js/mapPlugins/css/DrawingManager_min.css" type="text/css">
    <link rel="stylesheet" href="/js/mapPlugins/css/SearchInfoWindow_min.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="/css/base.css">
    <%- include ../taglib/layout-map.ejs %>
    <link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/plugins/bootstrap-table/dist/bootstrap-table.css">
    <!--<link rel="stylesheet" type="text/css" href="/css/monitor/monitor.css">-->
    <link href="/plugins/bootstrap-icheck/skins/flat/red.css" rel="stylesheet">
    <link href="/plugins/progressbar/progressbar.css" rel="stylesheet">
    <style type="text/css">
        body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        @keyframes doggeAnation {
            0%{
                opacity: 0.1;
            }
            50%{
                opacity: 0.5;
            }
            100%{
                opacity: 0.9;
            }
        }
        @-moz-keyframes doggeAnation {
            0%{
                opacity: 0.1;
            }
            50%{
                opacity: 0.5;
            }
            100%{
                opacity: 0.9;
            }
        }
        @-o-keyframes doggeAnation {
            0%{
                opacity: 0.1;
            }
            50%{
                opacity: 0.5;
            }
            100%{
                opacity: 0.9;
            }
        }
        @-webkit-keyframes doggeAnation {
            0%{
                opacity: 0.1;
            }
            50%{
                opacity: 0.5;
            }
            100%{
                opacity: 0.9;
            }
        }
        .arrowLeft{
             position: absolute;
             right: -3px;
             top:50%;
             font-size: 32px;
             cursor: pointer;
             animation: doggeAnation 3s infinite;
             -webkit-animation: doggeAnation 3s infinite ;
             -moz-animation:doggeAnation 3s infinite ;
             -o-animation: doggeAnation 3s infinite;
            z-index:1009
         }
        .arrowRight{
            position: absolute;
            left: 3px;
            top:50%;
            font-size: 32px;
            cursor: pointer;
            animation: doggeAnation 3s infinite;
            -webkit-animation: doggeAnation 3s infinite ;
            -moz-animation:doggeAnation 3s infinite ;
            -o-animation: doggeAnation 3s infinite;
            z-index:1009;
            display: none;
        }
        #left-box{
            display: block;
            position: fixed;
            height: 99%;
            padding-top:36px;
            right: 0;
            /*width: 240px*/
        }
        #left-box .btn-form img{
            width: 24px;
            height: 24px;
            cursor: pointer;
        }
        #left-box .timeBox label{
            display: inline-block;
            padding-bottom: 7px;
        }
        #left-box .timeBox input{
            /*width:180px;*/
            display: inline-block;
            float: right;
        }
        #left-box .timeBox .form-group{
            margin-bottom: 5px;
        }
        /*.arrowAn:hover{*/
            /*animation-play-state: paused;*/
            /*-moz-animation-play-state: paused;*/
            /*-webkit-animation-play-state: paused;*/
            /*-o-animation-play-state: paused;*/
        /*}*/

        .bottom-top-arrow{
            position: absolute;
            top:0;
            right:0;
            width: 25px;
            height: 25px;
            cursor: pointer;
            background-color: rgba(241, 245, 251, 1);
            opacity: 1;
        }
        .bottom-top-arrow > img{
            border-width: 0;
            position: absolute;
            left: 0;
            top: 0;
            width: 25px;
            height: 25px;
        }
        ul,li{
            padding: 0;
            margin: 0;
        }
        .monitor-box-head{
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            /* height: 48px; */
            /* border-bottom: 1px solid #d6d6d6; */
            background-color: rgba(241, 245, 251, 1);
            opacity: 1;
            z-index: 99;
            /* background-color: #fff; */
            height: 36px;
        }
        .monitor-box-bottom{
            position: fixed;
            bottom: 0;
            left: 0;
            height: 36px;
            z-index: 99;
            background-color: rgba(241, 245, 251, 1);
        }
        .monitor-box-head > ul,
        .monitor-box-bottom > ul{
            margin-right: 12px;
            list-style: none;
            float: left;
        }
        .monitor-box-head > ul >li,
        .monitor-box-bottom> ul >li{
            /* float: left; */
            /* padding: 6px 6px; */
            /* position: relative; */
            /* display: block; */
            /* cursor: pointer; */
            /* height: 36px; */
            /* width: 50px; */
            /* margin-right: 8px; */
            float: left;
            /* padding: 6px 6px; */
            position: relative;
            display: inline-block;
            cursor: pointer;
            height: 36px;
            /* width: 77px; */
            /* margin-right: 8px; */
            line-height: 30px;
        }
        .ibox-content{
            /*padding:0;*/
        }
        .ibox-header .btn-row{
            display:block;
            text-align: center;
        }
        /*.ibox-header .row{*/
            /*margin-right: 0px;*/
            /*margin-left: 0px;*/
        /*}*/
        .row{
            margin-right: 0px;
            margin-left: 0px;
        }
        .btn-row a{
            padding: 7px 9px;
            font-size: 12px;
            border-radius: 4px;
            color: #cc3333;
            display: block;
        }
        .form-input{
            height: 30px;
            width: 100%;
            padding: 3px 10px;
            border-radius: 4px;
            background-color: #fff;
            border: 1px solid rgb(217, 193, 191);
            box-sizing: border-box;
            line-height: 1;
            transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
            color: rgb(61, 34, 31);
        }
        .km-input{
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid rgb(217, 193, 191);
            box-sizing: border-box;
            color: rgb(61, 34, 31);
            font-size: inherit;
            height: 30px;
            line-height: 1;
            outline: 0;
            padding: 3px 10px;
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        }
        #blue{
            width:80%;
            /*background-color: #cc3333;*/
            margin-top: 7px;
        }
        #blue .ui-slider-range{
            background-color: #cc3333;
        }
        #blue .ui-slider-range{
            background-color: #cc3333;
        }
        #blue .ui-state-default{
            border: 1px solid #cc3333;
            background: #cc3333;
            border-radius: 50%;
            cursor: pointer;
        }
        /*.BMap_Marker img{
            margin-left: 12px!important;
            margin-top: 12px!important;
        }*/
    </style>
    <script type="text/javascript" src="/js/mapPlugins/DrawingManager.js"></script>
    <script type="text/javascript" src="/js/mapPlugins/SearchInfoWindow_min.js"></script>
    <script type="text/javascript" src="/js/mapPlugins/MapUtil.js"></script>
    <script type="text/javascript" src="/js/mapPlugins/angle.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
</head>

<body class="gray-bg"  data-spy="scroll" data-target="sidebarMenu">
    <!--<div class="monitor-box-head">-->
        <!--<ul id="head-Tab">-->
        <!--&lt;!&ndash;<li tabCode = "1">-->
            <!--<img src="images/page3/超速_u1088.png">-->
            <!--<span class="text">-->
                <!--超速-->
            <!--</span>-->
        <!--</li>-->
        <!--<li tabCode = "3">-->
            <!--<img src="images/page3/行驶_u1092.png">-->
            <!--<span class="text">-->
                <!--行驶-->
            <!--</span>-->
        <!--</li>-->
        <!--<li tabCode = "0">-->
            <!--<img src="images/page3/停车_u1089.png">-->
            <!--<span class="text">-->
                <!--停车-->
            <!--</span>-->
        <!--</li>-->
        <!--<li tabCode = "2">-->
            <!--<img src="images/page3/离线_u1091.png">-->
            <!--<span class="text">-->
            <!--离线-->
        <!--</span></li>-->
        <!--<li tabCode = "4">-->
            <!--<img src="images/page3/blue_car.png">-->
            <!--<span class="text">-->
            <!--在线-->
        <!--</span></li>-->
        <!--<li tabCode = "5">-->
            <!--<img src="images/page3/wenao_img.png" style="width: 20px; height: 20px;">-->
            <!--<span class="text">-->
            <!--未定位-->
            <!--</span></li>-->
        <!--<li tabCode = "5">-->
            <!--<img src="images/page3/jianhao.png" style="width: 20px; height: 20px;">-->
            <!--<span class="text">-->
            <!--停车超时-->
        <!--</span>-->
        <!--</li>&ndash;&gt;-->
        <!--<li tabCode = "1">-->
            <!--<img src="/js/mapPlugins/img/car_online1.png">-->
            <!--<span class="text">-->
                        <!--异常-->
                    <!--</span>-->
        <!--</li>-->
        <!--<li tabCode = "3">-->
            <!--<img src="/js/mapPlugins/img/car_online.png">-->
            <!--<span class="text">-->
                        <!--行驶-->
                    <!--</span>-->
        <!--</li>-->
        <!--<li tabCode = "0">-->
            <!--<img src="/js/mapPlugins/img/car_online3_0.fw.png">-->
            <!--<span class="text">-->
                        <!--停车-->
                    <!--</span>-->
        <!--</li>-->
        <!--<li tabCode = "2">-->
            <!--<img src="/js/mapPlugins/img/car_online2.png">-->
            <!--<span class="text">-->
                    <!--离线-->
                <!--</span></li>-->
    <!--</ul>-->
    <!--</div>-->
    <div class="wrapper wrapper-content"   style="padding:0;position: absolute;width: 100%;height: 100%">
        <i class="fa fa-angle-double-right arrowRight"
           aria-hidden="true"
        ></i>
        <div id="fakeLoader"class="fakeloader" style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgb(52, 152, 219); z-index: 999; display: none;"><div class="fl spinner4" style="position: absolute; left: 682px; top: 364.5px;"></div></div>
        <div class="left-tree-bottom-arrow" id="bottom-arrow"
             style="position: absolute;bottom: 80px;right:13px;
                 width: 26px;height: 26px;z-index: 99;cursor: pointer;display: none">
            <img src="../images/page3/左上角_u1239.png" style="
                 width: 26px;height: 26px;">
        </div>
        <div id="left-box" class="row animated fadeInDown"
             style="background-color: #fff;right: 0px;padding-top: 0px;padding: 15px;"
             >
            <!--<i class="fa fa-angle-double-left arrowLeft" aria-hidden="true"></i>-->
            <!--<div class="left-tree-arrow" id="left-tree-arrow"-->
                 <!--style="position: absolute;top: 36px;left:13px;-->
                 <!--width: 26px;height: 26px;z-index: 99;cursor: pointer">-->
                <!--<img src="../images/page3/u1245.png" style="-->
                 <!--width: 26px;height: 26px;">-->
            <!--</div>-->
            <div class="ibox float-e-margins" style="width: 220px">
                <div class="ibox-header" style="display: block">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="btn-row">
                                <a onclick="openmap1()">
                                    测距
                                </a>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="btn-row">
                                <a onclick="clearAllOver()">
                                    清除
                                </a>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="btn-row">
                                <a onclick="exportExcleHis()">
                                    导出
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="ibox-content" style="border-top: 1px solid rgb(229, 211, 209)">
                    <!--<form role="form" class="form-inline btn-form" style="border-bottom: 1px solid #e5e5e5;">-->
                        <!--<img id="playbtn" class="img "  onclick="play()" style="display:inline-block;width: 20px;height:20px;margin-right: 6px;margin-left: 6px" src="../images/轨迹回放/u1426.png">-->
                        <!--<img id="pausebtn" class="img " onclick="pause()" style="display:none;width: 20px;height:20px;margin-right: 6px" src="../images/轨迹回放/zanting.png">-->
                        <!--<img id="stopbtn" class="img " onclick="stop()"style="display:none;width: 20px;height:20px;margin-right: 6px" src="../images/轨迹回放/tignzhi.png">-->
                        <!--<img id="u1429_img" class="img " style="display:inline-block;width: 20px;height:20px;margin-right: 6px" src="../images/轨迹回放/u1429.png">-->
                        <!--<img id="u1432_img" class="img " style="display:inline-block;width: 20px;height:20px;margin-right: 6px" src="../images/轨迹回放/u1432.png">-->
                        <!--<img id="u1435_img" class="img " style="display:inline-block;width: 20px;height:20px;margin-right: 6px" src="../images/轨迹回放/u1435.png">-->
                        <!--<img id="u1438_img" class="img " style="display:inline-block;width: 20px;height:20px;margin-right: 6px" src="../images/轨迹回放/u1438.png" onclick="exportExcleHis()">-->
                        <!--<img id="u1441_img" class="img " style="display:inline-block;width: 20px;height:20px;float: right" src="../images/轨迹回放/u1441.png">-->
                    <!--</form>-->
                    <form class="form-horizontal  timeBox" >
                        <div class="form-group">
                            <label class="control-label" >车辆编号</label>
                            <input type="text"   class="input form-control form-input" id="serchStr" value="<%=carNo%>">
                        </div>
                        <div class="form-group">
                            <label class="control-label">开始时间</label>
                            <div class="btn-row" style="display: inline-block;">
                                <a onclick="clickToDay()">
                                    今天
                                </a>
                            </div>
                            <div class="btn-row" style="display: inline-block;">
                                <a onclick="clickPrevDay()">
                                    昨天
                                </a>
                            </div>
                            <div class="btn-row" style="display: inline-block;">
                                <a onclick="clickPrevsDay()">
                                    前天
                                </a>
                            </div>
                            <input placeholder="开始时间" class="laydate-icon form-control layer-date form-input" id="start">
                        </div>
                        <div class="form-group">
                            <label class="control-label">结束时间</label>
                            <input placeholder="结束时间" class="laydate-icon form-control layer-date form-input" id="end">
                        </div>
                    </form>
                    <form role="form" class="form-horizontal  timeBox" >

                        <div class="form-group" >
                            <div  style="display: inline-block;float: left;width: 80px">
                                <label class="control-label">低速(km/h)</label>
                                <input type="number" class="km-input" value="30"  style="width:100%;" id="lowspeed" name="lowspeed" min="1" max="300" />
                            </div>
                            <div  style="display: inline-block;float: right;width: 80px">
                                <label class="control-label">高速(km/h)</label>
                                <input type="number" class="km-input"  value="80"    style="width:100%;" id="highspeed" name="highspeed" min="1" max="300" />
                            </div>
                        </div>
                        <!-- <div class="form-group">
                             <label class="control-label">路线图例&ndash;&gt;</label>
                             <button class="btn btn-info btn-sm btn-select-row" type="button" >路线图例&ndash;&gt;</button>
                         </div>-->
                        <!--  <div class="btn-group" role="group">
                              <button type="button" class="btn btn-sm btn-success">低速</button>
                              <button type="button" class="btn btn-sm btn-primary">正常</button>
                              <button type="button" class="btn btn-sm btn-danger">高速</button>
                          </div>-->

                    </form>
                    <form class="form-horizontal timeBox" >
                        <div class="form-group">
                            <label class="control-label">停车超时(分)</label>
                            <input type="text"   class="input form-control form-input" id="stopTime" value="0">
                            <!--<label class="control-label" >车辆编号</label>-->
                            <!--<input type="text"   class="input form-control form-input" id="serchStr" value="<%=carNo%>">-->
                        </div>
                    </form>
                    <form role="form" class="form-horizontal timeBox ">
                        <!--<button class="btn btn-info btn-sm btn-select-row" type="button" >慢</button>-->
                        <!--<button class="btn btn-info btn-sm btn-select-row" type="button" onclick="fastForward()"><i class="fa fa-fast-forward"></i> 快进</button>-->
                        <!--<button class="btn btn-info btn-sm btn-select-row" type="button" onclick="fastBackward()"><i class="fa fa-fast-backward"></i> 快退</button>-->
                        <div class="form-group">
                            <label class="control-label">回放速度(<span style="color:#676a6c;font-size: 13px;font-weight: normal">当前播放间隔:<span id="amount"></span></span>)</label>
                            <div id="blue" class="form-group" ></div>
                            <!--<label class="control-label" >车辆编号</label>-->
                            <!--<input type="text"   class="input form-control form-input" id="serchStr" value="<%=carNo%>">-->
                        </div>
                        <div class="form-group" style="display:none;" id="progressbar-box">
                            <label class="control-label">回放进度(<span style="color:#676a6c;font-size: 13px;font-weight: normal"><span id="pointingNum">0</span>/<span id="totalPoint">0</span></span>)</label>
                            <div id="progressbar" class="progressbar" style="margin-top: 7px;margin-bottom: 5px">
                            </div>
                        </div>
                        <!--<button class="btn btn-info btn-sm btn-select-row" type="button" >快</button>-->
                        <!--<div class="form-group">-->
                            <!--<label class="control-label">当前播放间隔</label>-->
                        <!--</div>-->
                        <!--<div class="form-group" style="width: 20px">-->
                            <!--<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;width: 30px">-->
                        <!--</div>-->
                    </form>
                    <div style="display:block;margin-top: 15px;margin-left: -15px;width:220px">
                        <div style="display: inline-block;margin-right: 15px">
                            <input name="status" type="checkbox" data-size="small" id="guijicheck">显示轨迹明细
                        </div>
                        <div style="display: inline-block">
                            <input name="status" type="checkbox" data-size="small" id="guijipoint" checked>轨迹点
                        </div>
                    </div>
                    <div style="display:block;margin-top: 7px;margin-left: -15px;width:220px">
                        <div style="display: inline-block;margin-right: 15px">
                            <input name="status" type="checkbox" data-size="small" id="showcankao" checked>显示参考点位
                        </div>
                        <div style="display: inline-block">
                            <input name="status" type="checkbox" data-size="small" id="pingbiSpeed" checked>屏蔽0速度
                        </div>
                    </div>
                    <div class="modal-footer" style="border:0">
                        <button class="btn btn-info btn-sm btn-select-row playop" style="margin-bottom: 0px;width: 100%;background-color:rgb(214, 92, 92);
                                    border-color:rgb(214, 92, 92);" type="button" onclick="loadHistoryData()">播放轨迹</button>
                        <button class="btn btn-info btn-sm btn-select-row noplayop zangtingplay" style="margin-bottom: 0px;width: 48%;background-color:rgb(214, 92, 92);
                                    border-color:rgb(214, 92, 92);float: left;margin-left: 0;display: none" type="button" onclick="pause()">暂停</button>
                        <button class="btn btn-info btn-sm btn-select-row  goonplayop" style="margin-bottom: 0px;width: 48%;background-color:rgb(214, 92, 92);
                                    border-color:rgb(214, 92, 92);float: left;margin-left: 0;display: none" type="button" onclick="goOnplay()">继续播放</button>
                        <button class="btn btn-info btn-sm btn-select-row noplayop" style="margin-bottom: 0px;width: 48%;background-color:rgb(214, 92, 92);
                                    border-color:rgb(214, 92, 92);margin-left: 3px;;float: left;display: none" type="button" onclick="stop()">停止</button>
                    </div>
                </div>
            </div>
        </div>
        <div id="mapParent"
             style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;padding-right: 248px;">
            <div id="map" style="height: 100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
            </div>
            <div id="app-right-top">
                <div id="user-center" class="ui3-user-center-wrap">
                    <div class="avatar-abstract"></div>
                </div>
            </div>
        </div>
    </div>

<div class="modal inmodal" id="myModal" role="dialog" data-width="300px"
     data-height="300px" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <h4 class="modal-title">设定当前轨迹为固定路线</h4>
            </div>
            <div class="modal-body" style="max-height: 300px; ">

                <form class="form-horizontal m-t" id="editForm" method="get">
                    <input id="id" name="id" type="hidden">
                    <input id="fenceType" name="fenceType" type="hidden">
                    <input id="memo" name="memo" type="hidden">
                    <input id="contentinfo" name="contentinfo" type="hidden">
                    <input id="h_c_car_id_f" name="fcarId" type="hidden">
                    <input id="h_c_start_f" name="fstart" type="hidden">
                    <input id="h_c_end_f" name="fend" type="hidden">
                    <input id="h_c_status_f" name="fstatus" type="hidden">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">线路名称</label>
                        <div class="col-sm-8">
                            <input id="settingname" name="settingname" class="form-control"
                                   placeholder="名称必填" type="text" aria-required="true"
                                   aria-invalid="true">
                        </div>
                    </div>
                    <div class="form-group" id="settingname_div">
                        <label class="col-sm-3 control-label">预计耗时(分钟)</label>
                        <div class="col-sm-8">
                            <input id="lineTime" name="lineTime" class="form-control"
                                   placeholder="预计耗时" type="text" number="true" value="0">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" onclick="closeModal()">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveFence()">保存</button>
            </div>
        </div>
    </div>
</div>
    <div class="monitor-box-bottom" id="monitor-box-tab">
        <ul id="head-Tab">
            <li tabCode = "1">
                <img src="/js/mapPlugins/img/car_online1.png">
                <span class="text">
                    异常
                </span>
            </li>
            <li tabCode = "3">
            <img src="/js/mapPlugins/img/car_online.png">
            <span class="text">
            行驶
            </span>
            </li>
            <li tabCode = "0">
            <img src="/js/mapPlugins/img/car_online3_0.fw.png">
            <span class="text">
            停车
            </span>
            </li>
            <li tabCode = "2">
            <img src="/js/mapPlugins/img/car_online2.png">
            <span class="text">
            离线
            </span></li>
            <!--<li tabCode = "4" style="margin-left: 10px">-->
                <!--<span class="text" style="width: 30px;-->
    <!--height: 30px;-->
    <!--display: inline-block;-->
    <!--background-color: #05b801;">-->
            <!--报警-->
            <!--</span></li>-->
            <li tabCode = "4" style="margin-left: 10px">
                <span class="text" style="width: 30px;
    height: 30px;
    display: inline-block;
    background-color:#0010ca;color:#fff;text-align: center">
            低
            </span></li>
            <li tabCode = "4">
                <span class="text" style="width: 30px;
    height: 30px;
    display: inline-block;
    background-color: #05b801;color:#fff;text-align: center">
            正常
            </span></li>
            <li tabCode = "4" >
                <span class="text" style="width: 30px;
    height: 30px;
    display: inline-block;
    background-color: #d90109;color:#fff;text-align: center">
            高
            </span></li>
        </ul>
    </div>
    <div id="bottom-box"
            style="position: fixed;
            bottom: 0;
            width: 100%;
            height: 248px;
            max-height: 248px;
            border-top: 1px solid #d6d6d6;
            background-color: rgba(241, 245, 251, 1);
            z-index: 101;
            display: none;padding:12px">
        <div style="display: block;width: 100%;padding: 6px">
            <!--<div class="bottom-top-arrow" id="bottom-top-arrow">-->
                <!--<img src="/images/page3/bottom-arrow.png">-->
            <!--</div>-->
        </div>
        <table id="carInfoDetailsTable" class="table-responsive" >
        </table>
    </div>

<input type="hidden" id="h_c_car_id" value="<%=carId%>">
<input type="hidden" id="h_all_car_id">
<%- include ../taglib/layout-content.ejs %>
    <script type="text/javascript" src="/js/common/moment.js"></script>
    <script type="text/javascript" src="/js/common/jquery.dateUtils.js"></script>
    <script type="text/javascript" src="/plugins/progressbar/jquery.progressbar.js"></script>
    <script type="text/javascript">
        var height = $(window).height();
        $("#left-box").css({"maxHeight":height+"px","height":height+"px","overflowY":"auto"})
        var gpsTable;
        var warningTable;
        var wltable;
        var lastHisMak=null;
        $(document).ready(function () {
            $(".arrowLeft").on("click",function () {
                $(this).hide();
                $("#left-box").hide(300);
                $(".arrowRight").show();
            });
            $(".arrowRight").on("click",function () {
                $(this).hide();
                $("#left-box").show(300);
                $(".arrowLeft").show();
            });
            $("#left-tree-arrow").on("click",function () {
                $(this).hide();
                $("#left-box").hide(300);
                $("#bottom-arrow").show();
            });
            $("#bottom-arrow").on("click",function () {
                $(this).hide();
                $("#left-box").show(300);
                $("#left-tree-arrow").show();
            });
            gpsTable = $('#gpsTable').dataTable({
                "lengthChange": true,//是否允许用户自定义显示数量
//            "searching": false,//本地搜索
//            "scrollY": "220px",//dt高度
//            "autoWidth": true,//自动宽度
                "scrollY": "150px",//dt高度
                scrollX: true,
                "autoWidth": true,//自动宽度
                "paging": true, // 禁止分页
                "dom": '<"top"<"clear">>rt<"bottom"ilp<"clear">>',
//            "lengthChange": false,//是否允许用户自定义显示数量
                "ajax": {
                    "url": "/map/carTabHisData",
                    "dataSrc": "rows"
                },
//            "paging": true, // 禁止分页
                serverSide: true,
                columns: [
//                {
//                    "sClass": "text-center",
//                    "data": "id",
//                    'checkboxes': {
//                        'selectRow': true,
//                    },
//
//                },
                    {"sClass": "text-center", data: 'id'},
                    //禁止排序
                    {"sClass": "text-center", data: 'baseCarNo', "bSortable": false, "orderable": false},
                    {"sClass": "text-center", data: 'gpsDate', "bSortable": false, "orderable": false},
                    {"sClass": "text-center", data: 'onlinetime', "bSortable": false, "orderable": false},
                    {"sClass": "text-center", data: 'deptName', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'elType', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'baseCarNoColour'},
                    {
                        "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
                        //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                        var gpsPowerStatus = e.gpsPowerStatus;
                        var acc = e.accFlag;
                        var oneHigh = e.oneHigh;
                        var str=""
                        if(gpsPowerStatus == 1){
                            str="主电正常, "
                        }else{
                            str="主电异常, "
                        }
                        if (acc == 1) {
                            str = str+"点火, "
                        }else{
                            str = str+"熄火, "
                        }
                        if(oneHigh){
                            str=str+" 时长: "+oneHigh+"分钟"
                        }else{
                            str=str+" 时长: 0 分钟"
                        }



//                    var result = '<a class="btn btn-warning btn-rounded" >熄火</a>'
////                    车牌号颜色[1-4]黄白蓝黑
//                    if (d == 1) {
//                        result = '<a class="btn btn-default btn-rounded" >点火</a>'
//                    }
                        return str
                    }, "bSortable": false, "orderable": false
                    },
//                {
//                    "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
//                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
//                    var d = e.accFlag;
//                    var result = '<a class="btn btn-warning btn-rounded" >关闭</a>'
////                    车牌号颜色[1-4]黄白蓝黑
//                    if (d == 1) {
//                        result = '<a class="btn btn-default btn-rounded" >开启</a>'
//                    }
//                    return result
//                }, "bSortable": false, "orderable": false
//                },
//                {
////                    online
//                    "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
//                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
////                    accFlag
//                    var d = e.online;
//                    var result = '<a class="btn btn-info btn-rounded" >在线</a>'
////                    车牌号颜色[1-4]黄白蓝黑
//                    if (d == 1) {
//                        result = '<a class="btn btn-info btn-rounded" >在线</a>'
//                    } else if (d == 0) {
//                        result = '<a class="btn btn-danger btn-rounded" >离线</a>'
//                    }
//                    return result
//                }, "bSortable": false, "orderable": false
//                },
                    {"sClass": "text-center", data: 'speed', "bSortable": false, "orderable": false},


//                {"sClass": "text-center", data: 'driection', "bSortable": false, "orderable": false},

                    {
//                    dir
                        "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
                        //e是得到的json数组中的一个item ，可以用于控制标签的属性。
//                    accFlag
                        var d = queryAngle(e.driection);

                        result = d;
                        return result;
                    }, "bSortable": false, "orderable": false
                    },


                    {"sClass": "text-center",data: function (e) {
                        var d = e.totalDis;
//
                        return toDis(d)
                    },
                        "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'monthDis', "bSortable": false, "orderable": false}
//                {"sClass": "text-center", data: 'totalDis', "bSortable": false, "orderable": false},
                    {"sClass": "text-center", data: 'jd', "bSortable": false, "orderable": false},
                    {"sClass": "text-center", data: 'wd', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'oilTotal', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'memo', "bSortable": false, "orderable": false}
                ],
                //排序
//            'order': [[1, 'desc']],
                initComplete: function (setting, json) {
                    //隐藏列
                    visiblecolumn(this,0, false);
//                visiblecolumn(this,4, false);
//                visiblecolumn(this,11, false);
//                visiblecolumn(this,12, false);
//                visiblecolumn(6,false)
                },
            });
            $('#gpsTable tbody').on('click', 'tr', function () {
                $('#gpsTable tbody').on('click', 'tr', function () {
                    if ($(this).hasClass('selected')) {
                        $(this).removeClass('selected');
                    } else {
                        gpsTable.$('tr.selected').removeClass('selected');
                        $(this).addClass('selected');
                        var row = gpsTable.DataTable().rows('.selected').data()[0];
                        var jd = row.jd;
                        var wd = row.wd;
                        var addressDetail = "无详细地址信息!";
                        var myGeo = new BMap.Geocoder();
                        myGeo.getLocation(new BMap.Point(jd, wd), function (result) {
                            var content = '<div class="ibox float-e-margins">' +
                                '<div class="">' +
                                '<h5>实时信息</h5>' +
                                '</div>' +
                                '<div class="ibox-content"> ' +
//                            '<div class="ibox-content ">' +
                                '车牌号：' + row.baseCarNo + '<br/>' +
                                '定位时间：' + row.gpsDate + '<br/>' +
                                '行驶速度:' + row.speed + '<br/>' +
                                '经度:' + row.jd + '<br/>' +
                                '纬度:' + row.wd + '<br/>' +
                                '当前位置:' + addressDetail + '<br/>' +
                                '</div>' +
                                '</div>';
                            addHismapMark(jd, wd,content);
                        });

                    }

                });

            });
            wltable = $('#example').dataTable({
                "lengthChange": true,//是否允许用户自定义显示数量
//            "searching": false,//本地搜索
                "scrollY": "80px",//dt高度
                scrollX: true,
                "autoWidth": false,//自动宽度
                "paging": false, // 禁止分页
                "dom": '<"top"<"clear">>rt<"bottom"ilp<"clear">>',
                "ajax": {
                    "url": "/baseCommonFence/list",
                    "dataSrc": "rows"
                },
                serverSide: true,
                columns: [
                    {"sClass": "text-center", data: 'id'},
                    {"sClass": "text-center", data: 'settingname', "bSortable": false, "orderable": false},
//                1-兴趣点 2-区域圆形 3-区域多边形 4-路线折线
//                {"sClass": "text-center", data: 'fenceType', "bSortable": false, "orderable": false},
                    {
                        "bSortable": false,//禁止排序
                        "orderable": false,
                        "sClass": "text-center",
                        data: function (d, e, f, g) {//这里给最后一列返回一个操作列表
                            //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                            var ftype = d.fenceType;
                            var stype="";
                            if(ftype=="1"){
                                stype = "兴趣点";
                            }else if(ftype=="2"){
                                stype = "区域圆形";
                            }else if(ftype=="3"){
                                stype = "区域多边形";
                            }else if(ftype=="4"){
                                stype = "路线折线";
                            }

                            return stype
                        }
                    },
                    {"sClass": "text-center", data: 'lineTime', "bSortable": false, "orderable": false},
                    {"sClass": "text-center", data: 'contentinfo', "bSortable": false, "orderable": false},
                    {"sClass": "text-center", data: 'memo', "bSortable": false, "orderable": false},
                    {"sClass": "text-center", data: 'lineDis', "bSortable": false, "orderable": false},


                    {
                        "bSortable": false,//禁止排序
                        "orderable": false,
                        "sClass": "text-center",
                        data: function (d, e, f, g) {//这里给最后一列返回一个操作列表
                            //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                            var id = d.id
                            var index = g.row
                            return '' +
                                '<button class="btn btn-info btn-sm btn-select-row" type="button" onclick="editwl(' + index + ')" data-toggle="modal"   ><i class="fa fa-edit"></i> <span class="bold">预览</span>' ;
//                            '<button class="btn btn-info btn-sm btn-select-row" type="button" onclick="editLineDis(' + index + ')" data-toggle="modal"   ><i class="fa fa-edit"></i> <span class="bold">编辑</span>' +
//                            '<button class="btn btn-danger btn-sm btn-select-row" type="button"  onclick="del(' + id + ')" ><i class="fa fa-close"></i> <span class="bold">删除</span>';

                        }
                    }
                ],
                //排序
//            'order': [[1, 'desc']],
                initComplete: function (setting, json) {
                    //隐藏列
                    visiblecolumn(wltable,0, false);
                    visiblecolumn(wltable,4, false);
                    visiblecolumn(wltable,5, false);
                },
            });
            warningTable = $('#warningTable').dataTable({
                "lengthChange": true,//是否允许用户自定义显示数量
//            "searching": false,//本地搜索
//            "scrollY": "220px",//dt高度
//            "autoWidth": true,//自动宽度
                "dom": '<"top"<"clear">>rt<"bottom"ilp<"clear">>',
//            "lengthChange": false,//是否允许用户自定义显示数量
                "ajax": {
                    "url": "/map/hiswarnings",
                    "dataSrc": "rows"
                },
                bAutoWidth:false,//取消自动宽度
                serverSide: true,
                columns: [
                    {
                        "sClass": "text-center",
                        "data": "id",
                        'checkboxes': {
                            'selectRow': true,
                        },

                    },
                    {"sClass": "text-center", data: 'id'},
                    //禁止排序
                    {"sClass": "text-center", data: 'baseCarNo', "bSortable": false, "orderable": false},
                    {"sClass": "text-center", data: 'deptName', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'elType', "bSortable": false, "orderable": false},
                    {
//                    warningType
                        "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
                        //e是得到的json数组中的一个item ，可以用于控制标签的属性。
//                    debugger;
                        var d = e.warningType;
//                    1-驶入  2-驶出 3-超速 4-路线偏离 5-停车超时报警  6-疲劳驾驶报警 7-凌晨行车报警
                        var result = "";
                        if (d == 1) {
                            result = '驶入报警'
                        } else if (d == 2) {
                            result = '驶出报警'
                        } else if (d == 3) {
                            result = '超速报警'
                        } else if (d == 4) {
                            result = '路线偏离报警'
                        } else if (d == 5) {
                            result = '停车超时报警'
                        } else if (d == 6) {
                            result = '疲劳驾驶报警'
                        } else if (d == 7) {
                            result = '凌晨行车报警'
                        }else if (d == 8) {
                            result = '拆机报警'
                        }
                        return '<a class="btn btn-danger btn-rounded" >' + result + '</a>'
                    }, "bSortable": false, "orderable": false
                    },
                    {"sClass": "text-center", data: 'user_name', "bSortable": false, "orderable": false},
                    {"sClass": "text-center", data: 'waringtime', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'jd', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'wd', "bSortable": false, "orderable": false},
//                {
//                    "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
//
//                    var jd = e.jd;
//                    var wd = e.wd;
//                    var result = jd + wd;
//                    return result
//                }, "bSortable": false, "orderable": false
//                },
                    {
                        "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
                        //e是得到的json数组中的一个item ，可以用于控制标签的属性。
//                    debugger;
//                    accFlag
                        var d = e.type;
                        var result = '<a class="btn btn-info btn-rounded" >已处理</a>'
//                    车牌号颜色[1-4]黄白蓝黑
                        if (d == 1) {
                            result = '<a class="btn btn-info btn-rounded" >已处理</a>'
                        } else if (d == 0) {
                            result = '<a class="btn btn-warning btn-rounded" >未处理</a>'
                        }
                        return result
                    }, "bSortable": false, "orderable": false
                    }
                ],
                //排序
//            'order': [[1, 'desc']],
                initComplete: function (setting, json) {
                    //隐藏列
                    visiblecolumn(warningTable, 1, false);
//                visiblecolumn(warningTable,4, false);
//                visiblecolumn(12, false);
//                visiblecolumn(13, false);
//                visiblecolumn(6,false)
                },
            });
        });
        //    部门车辆树
        $(function () {
            var url='/tree/deptCar';
            init_tree('id','parentId','name',fnClick);
            //loadMyTree(url);
//        $('body').everyTime('2das','refData',refData,0,true);
            var start = {
                elem: '#start',
                format: 'YYYY-MM-DD hh:mm:ss',
//            min: laydate.now(), //设定最小日期为当前日期
                max: '2999-06-16 23:59:59', //最大日期
//            start: laydate.now(),
//            start: laydate.now() + ' 00:00:00',
                istime: true,
                istoday: false,
                festival: true, //是否显示节日
                choose: function (datas) {
                    if(datas){
                        end.min =datas.substring(0,10)+" 00:00:00"
                        end.start = datas.substring(0,10)+" 00:00:00"
                    }
//                end.min = datas; //开始日选好后，重置结束日的最小日期
//                end.start = datas //将结束日的初始值设定为开始日
                }
//            min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
//            max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
            };
            var end = {
                elem: '#end',
                format: 'YYYY-MM-DD hh:mm:ss',
//            min: laydate.now(),
                max: '2999-06-16 23:59:59',
//            start: laydate.now() + ' 23:59:59',
                istime: true,
                istoday: false,
                festival: true, //是否显示节日
                choose: function (datas) {
                    var st=$("#start").val();
                    if(st>datas){
                        swal({
                            title: "系统提示",
                            text: "开始时间必须小于结束时间!",
                            type: "error"
                        });
//                    $("#end").val(laydate.now() + ' 23:59:59');
                    }else{
                        start.max = datas.substring(0,10)+" 23:59:59"; //结束日选好后，重置开始日的最大日期
                    }
                }
            };
            laydate(start);
            laydate(end);
            $("#start").val(laydate.now() + ' 00:00:00');
            $("#end").val(laydate.now() + ' 23:59:59');
//        $('[name="status"]')
            $("#playbtn").show();
            $("#pausebtn").hide();
            $("#stopbtn").hide();

            $("#start").on("click",function () {
               // $("#laydate_box").css({"right":"5px"})
            })
        });
        //    隐藏列
        function visiblecolumn(table,c, visible) {
            table.DataTable().column(c).visible(visible)
        }
        /**
         * 树刷新数据
         */
        function query() {
//        debugger;
            //search_ztree('kindTree','serchStr');
        }

        function querywl(flag) {
//        var start = $("#start").val();
//        var end = $("#end").val();
            var code = $("#serchStrwl").val();
            var jsonstr = [ {"code": code}];
            wltable.DataTable().search(JSON.stringify(jsonstr), false, false).draw(flag);
        }
        function editwl(index) {
            clearAlldrawingModes();
            var data = wltable.DataTable().rows(index).data()
            $("#wlid").val(index);
            if (data && data[0]) {
                //loadComb("baseCarNoColour",combColor);
//            $('#editForm').resetForm();
                var contentinfo=data[0].contentinfo;
                var memo=data[0].memo;
                var fenceType=data[0].fenceType;
                if(fenceType && fenceType==1 && contentinfo){
                    var array=contentinfo.split(",")
                    addDrawingMark(array[0], array[1]);
                }else if(fenceType && fenceType==2 && contentinfo){
                    var radius=contentinfo.split(";")[1];
                    var array=contentinfo.split(";")[0].split(",")
                    addDrawingCircle(array[0], array[1],radius);
                }else if(fenceType && fenceType==3 && contentinfo){
                    var points=contentinfo.split(";");
                    var array=memo.split(",")
                    addDrawingPolygon(points,array[0],array[1]);
                }else if(fenceType && fenceType==4 && contentinfo){
                    var points=contentinfo.split(";");
                    debugger;
                    var array=memo.split(",")
                    addDrawingPolyline(points,array[0],array[1]);
                }

            } else {
                //swal("已取消", "数据错误！", "warning");
            }
        }
        function editwl1(index) {
            clearAlldrawingModes();
            var data = wltable.DataTable().rows(index).data()
//        $("#wlid").val(index);
            if (data && data[0]) {
                //loadComb("baseCarNoColour",combColor);
//            $('#editForm').resetForm();
                var contentinfo=data[0].contentinfo;
                var memo=data[0].memo;
                var fenceType=data[0].fenceType;
                if(fenceType && fenceType==1 && contentinfo){
                    var array=contentinfo.split(",")
                    addDrawingMark(array[0], array[1]);
                }else if(fenceType && fenceType==2 && contentinfo){
                    var radius=contentinfo.split(";")[1];
                    var array=contentinfo.split(";")[0].split(",")
                    addDrawingCircle(array[0], array[1],radius);
                }else if(fenceType && fenceType==3 && contentinfo){
                    var points=contentinfo.split(";");
                    var array=memo.split(",")
                    addDrawingPolygon(points,array[0],array[1]);
                }else if(fenceType && fenceType==4 && contentinfo){
                    var points=contentinfo.split(";");
                    debugger;
                    var array=memo.split(",")
                    addDrawingPolyline(points,array[0],array[1]);
                }

            } else {
                //swal("已取消", "数据错误！", "warning");
            }
        }
    </script>

    <!--map-->
    <script type="text/javascript">
        // 百度地图API功能
        var validator;
        var map;
        var carIocnPath="/js/mapPlugins/img/";
        var lastMark=[];
        var lastCarMark={};//终端数组
        var myDis;
        var opts = {
            width : 180,     // 信息窗口宽度
            height: 180,     // 信息窗口高度
//        title : "实时信息" , // 信息窗口标题
            panel  : "panel",
            enableMessage:true,//设置允许信息窗发送短息
            searchTypes   :[
                BMAPLIB_TAB_SEARCH,   //周边检索
                BMAPLIB_TAB_TO_HERE,  //到这里去
                BMAPLIB_TAB_FROM_HERE //从这里出发
            ]
        };
        //    var carIcon="car_online0.fw";
        $(function () {
            map = new BMap.Map('map');
            map.addControl(new BMap.NavigationControl());
            map.addControl(new BMap.ScaleControl());
            map.addControl(new BMap.OverviewMapControl());
            map.enableScrollWheelZoom();
            map.addControl(new BMap.MapTypeControl());



            var contextMenu = new BMap.ContextMenu();
            var txtMenuItem = [
                {
                    text: '放大',
                    callback: function () {
                        map.zoomIn()
                    }
                },
                {
                    text: '缩小',
                    callback: function () {
                        map.zoomOut()
                    }
                },
                {
                    text: '放置到最大级',
                    callback: function () {
                        map.setZoom(18)
                    }
                },
                {
                    text: '查看全国',
                    callback: function () {
                        map.setZoom(4)
                    }
                },
                {
                    text: '在此添加标注',
                    callback: function (p) {
                        var marker = new BMap.Marker(p), px = map.pointToPixel(p);
                        map.addOverlay(marker);
                    }
                }
            ];
            for (var i = 0; i < txtMenuItem.length; i++) {
                contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
                if (i == 1 || i == 3) {
                    contextMenu.addSeparator();
                }
            }
            map.addContextMenu(contextMenu);
            // 创建控件
            var myZoomCtrl = new ZoomControl();
            // 添加到地图当中
            map.addControl(myZoomCtrl);
            var jw='39.542099,116.690666';
            initPoint(jw);
            myDis = new BMapLib.DistanceTool(map);
            //验证
            var cusrules = {
                rules: {
                    settingname: {
                        required: true,
                    },
                    lineTime: {
                        required: true,
                    },
                },
                messages: {
                    settingname: {
                        required: icon + "请输入名称"
                    },
                    lineTime: {
                        required: icon + "请输入时间"
                    },
                }

            };
            validator = $("#editForm").validate(cusrules);

        });

        function clearAllOver() {
            map.clearOverlays();
            stop();
        }
        /**
         * 今天
         */
        function clickToDay() {
            $("#start").val(DateUtils.getStartOfThisDay()+":00");
            $("#end").val(DateUtils.getEndOfThisDay()+":59");
            loadHistoryData();
        }
        /**
         * 昨天
         */
        function clickPrevDay() {
            $("#start").val(DateUtils.getLastNDay(1,true)+" 00:00:00");
            $("#end").val(DateUtils.getLastNDay(1,true)+" 23:59:59");
            loadHistoryData();
        }
        /**
         * 前天
         */
        function clickPrevsDay() {
            $("#start").val(DateUtils.getLastNDay(2,true)+" 00:00:00");
            $("#end").val(DateUtils.getLastNDay(2,true)+" 23:59:59");
            loadHistoryData();
        }
        //    树节点选中
        var fnClick=function (event, treeId, treeNode) {
//        tree_Obj.checkNode(treeNode, !treeNode.checked, true);
            selectTreeNode(treeNode);
        }
        function selectTreeNode(treeNode) {
            var isCar=treeNode.isCar
            if(isCar){
                $("#h_c_car_id").val(treeNode.id);
                refcalendar();
//            queryCarsByNo(ids);
            }
//        queryCars();
//        if(!tChecked){
//            cleanAll()
//        }
        }

        //刷新车辆列表
        function queryCars(carId,startTime,endTime,status,accFlag) {
            var jsonstr = [{"carId": carId},{"startTime":startTime},{"endTime":endTime},{"status":status},{"accFlag":accFlag}];
            gpsTable.DataTable().search(JSON.stringify(jsonstr), false, false).draw();
        }
        //刷新报警列表
        function querywarnings(carId,startTime,endTime) {
            var jsonstr = [{"carId": carId},{"startTime":startTime},{"endTime":endTime}];
            warningTable.DataTable().search(JSON.stringify(jsonstr), false, false).draw();
        }

        var refData=function refCarsById() {
            var carId=$("#h_c_car_id").val();
//        queryCarsByNo(carId);
            querywarnings();
        }

        //    查询按钮查询历史数据
        function queryHis() {
            debugger;
            var carId=$("#h_c_car_id").val();
            var start=$("#start").val();
            var end=$("#end").val();
            //var status =$('[name="status"]').is(':checked');
            var status =$('#pingbiSpeed').is(':checked');
            var accFlag=$('[name="accFlag"]').is(':checked');
            if(carId && carId!="0"){
                refHisMap(carId,start,end,status,accFlag)
                queryCars(carId,start,end,status,accFlag);
                querywarnings(carId,start,end);
            }else{
                swal({
                    title: "系统提示",
                    text: "请选择车辆!",
                    type: "error"
                });
            }
        }
        function exportExcleHis() {
            var carId=$("#h_c_car_id").val();

            var start=$("#start").val();
            var end=$("#end").val();
//            var status=$('[name="status"]').is(':checked');
            //var accFlag=$('[name="accFlag"]').is(':checked');
            var status = $('#pingbiSpeed').is(':checked')
//                "status":$('#pingbiSpeed').is(':checked')
            if(!carId){
                swal({
                    title: "系统提示",
                    text: "请选择车辆!",
                    type: "error"
                });
                return false;
            }
            if(!start){
                swal({
                    title: "系统提示",
                    text: "请选择开始时间!",
                    type: "error"
                });
                return false;
            }
            if(!end){
                swal({
                    title: "系统提示",
                    text: "请选择结束时间!",
                    type: "error"
                });
                return false;
            }
//            window.open("http://117.34.117.251:8080/heb/carHisExcel/exportExcel?carId="+carId+"&start="+start+"&end="+end+"&status="+status+"&accFlag="+accFlag)
            window.open(window.serveraddr+"/hisGpsInfo/exportExcel?carId="+carId+"&startTime="+start+"&endTime="+end+"&status="+status)
        }
        function openFence() {
            var carId=$("#h_c_car_id").val();

            var start=$("#start").val();
            var end=$("#end").val();
            var status=$('[name="status"]').is(':checked');
            var accFlag=$('[name="accFlag"]').is(':checked');
            if(!carId){
                swal({
                    title: "系统提示",
                    text: "请选择车辆!",
                    type: "error"
                });
                return false;
            }
            if(!start){
                swal({
                    title: "系统提示",
                    text: "请选择开始时间!",
                    type: "error"
                });
                return false;
            }
            if(!end){
                swal({
                    title: "系统提示",
                    text: "请选择结束时间!",
                    type: "error"
                });
                return false;
            }
            $("#myModal").modal("show");
            $("#h_c_car_id_f").val(carId);
            $("#h_c_start_f").val(start);
            $("#h_c_end_f").val(end);
            $("#h_c_status_f").val(status);
            $("#h_c_accFlag_f").val(accFlag);
            $("#contentinfo").val("");
            $("#fenceType").val("4");
            $("#memo").val("");
            $("#lineTime").val(0);
        }
        function saveFence() {
            $('#editForm').ajaxSubmit({
                type: 'post', // 提交方式 get/post
                dataType: 'json',
                url: '/map/saveFence', // 需要提交的 url
                beforeSubmit: function (formData, jqForm, options) {
                    if (!$("#editForm").valid()) {
                        return false;
                    }
                },
                success: function (data) {
                    // data 保存提交后返回的数据，一般为 json 数据
                    // 此处可对 data 作相关处理
                    if (data.success) {
                        swal({
                            title: "系统提示",
                            text: data.msg,
                            type: "success"
                        });
                        $("#myModal").setDefForm(validator);
                        $('#editForm').clearForm(true);
                        $("#myModal").modal("hide");
                        query();
                    } else {
                        swal({
                            title: "系统提示",
                            text: data.msg,
                            type: "error"
                        });
                    }
                    clearAlldrawingModes();

                },

            });
        }
        function closeModal() {
            $("#myModal").setDefForm(validator);
            $("#myModal").modal("hide");
        }
        function refHisMap(carId,start,end,status,accFlag){
//        swal({
//            title: "系统提示",
//            text: "正在查询车辆请稍后",
//            type: "error"
//        });
//            loadingfn(1000);
            cleanHis();
            $.ajax({
                url: '/map/carHisData',
                dataType: 'json',
                type: "GET",
                data: {
                    carId: carId,
                    start: start,
                    end: end,
                    status:status,
                    accFlag:accFlag
                },
                success: function (resdata) { // 获取当前月的数据
                    //添加数据
                    var data = resdata.rows;
                    if(data && data.length){
                        var totalMiles = resdata.totalMiles;
                        if(totalMiles){
                            $('#amount1').val(totalMiles+"KM")
                        }
                        $.each(data ,function (key, value) {
                            var carstatus = "在线停止状态";
                            if (value.onlineName == "0") {
                                carstatus = "离线";
                            }else if (value.onlineName == "1" && parseInt(value.speed) <10 ) {
                                carstatus = "停止"
                            } else if (value.onlineName == "1" && parseInt(value.speed) >= 10) {
                                carstatus = "行驶"
                            }else if(value.warningTypes == "3" || value.warningTypes == "5" || value.warningTypes == "8"){
                                carstatus = "异常"
                            }
                            addHisData(value.jd,value.wd,value.driection, value.gpsDate, value.speed,value.baseCarNo,value.accFlag,value.oneHigh,value.gpsPowerStatus,carstatus,value.address);
                        });
                        $("#totalPoint").text(data.length-1);
                        var lowspeed=$('#lowspeed').val();
                        var highspeed=$('#highspeed').val();
                        cleanAllHis();
                        var index=$("#wlid").val();
                        editwl1(index);
//                        $('body').oneTime('2s','D',function(){
//                            //画线
//                            drawpolygon(lowspeed,highspeed);
//                        });
                        drawpolygon(lowspeed,highspeed);
                        $.loadingBar.hide();
                        $(".playop").hide();
                        $(".noplayop").show();
//                        $('body').oneTime('1s','D',function(){
//                            play();
//                        });
                        play();

                    }else{
                        swal("系统提示", "未查询到数据！", "warning");
                        $.loadingBar.hide();
                    }


                }
            });
        }

        var histime=20;

        //    播放

        var t_s=2*300
        function play() {
//        var value=ui.value;
//        t_s=60-parseInt(value);
            var carId=$("#h_c_car_id").val();
            if(carId && carId!="0"){
                timer=window.setTimeout("onPlay()", t_s);
//            $('body').everyTime('5s','A',function(){
//                onPlay();
//            });
//                $("#playbtn").hide();
//                $("#pausebtn").show();
//                $("#stopbtn").show();
            }else{
//                swal({
//                    title: "系统提示",
//                    text: "请选择车辆或录入手机号查询轨迹",
//                    type: "error"
//                });
            }


        }
        function goOnplay() {
            $(".goonplayop").hide();
            $(".zangtingplay").show();
            play();
        }
        //    停止
        function stop() {
            $("#progressbar-box").hide();
            $(".goonplayop").hide();
            $(".noplayop").hide();
            $(".playop").show();
            if(timer){
                window.clearTimeout(timer);
            }
//        $('body').stopTime ('A');
//            $("#playbtn").show();
//            $("#pausebtn").hide();
//            $("#stopbtn").hide();
//            onReset();
//
//            return false;
            $('body').stopTime ('A');
            onReset();
            $("#playbtn").show();
            $("#pausebtn").hide();
            $("#stopbtn").hide();

        }
        //    暂停
        function pause() {
            $(".zangtingplay").hide();
            $(".goonplayop").show();
            if(timer){
                window.clearTimeout(timer);
            }
//        $('body').stopTime ('A');
//            $("#playbtn").show();
//            $("#pausebtn").hide();
//            $("#stopbtn").show();

            $('body').stopTime ('A');
            $("#playbtn").show();
            $("#pausebtn").hide();
            $("#stopbtn").show();

            //return false;

//        $('body').everyTime('5s','A',function(){
//            onPause();
//        });
        }
        var ss=t_s;
        function refreshSider(event ,ui) {
            var value=ui.value;
            var ssss=5-parseInt(value);
            ss=2*300;
            if(ssss>0){
                ss=(ssss)*300;
            }else{
                ss=200;
            }
            $( "#amount" ).text( ssss );
            if(points && timer && $(".playop").is(":hidden")){
                if(timer){
                    window.clearTimeout(timer);
                    timer=window.setTimeout("onPlay("+ss+")", ss);//window.setTimeout("onPlay()", );
                }

//            $('body').stopTime ('A');
//
//            $('body').everyTime(ss+'s','A',function(){
//                onPlay();
//            });
            }


        }
        //    快进
        function fastForward() {
            $('body').stopTime ('A');
            histime = histime - 5;
            if(histime<0){
                histime = 1;
            }
            $('body').everyTime(histime+'s','A',function(){
                onPlay();
            });
        }
        //    快退
        function fastBackward() {
            $('body').stopTime ('A');
            histime = histime + 5;
            if(histime>=20){
                histime = 20;
            }
            $('body').everyTime(histime+'s','A',function(){
                onPlay();
            });
        }

        function loadingfn(time) {
            swal({
                title: "正在加载请稍后",
//            text: "大约需要3秒",
                timer: time,
                showConfirmButton: true
            });
        }
    </script>
    <!--滑块-->
    <script type="text/javascript">
        $(document).ready(function () {
            $( "#blue" ).slider({
                orientation: "horizontal",
                range: "min",
                min:0,
                max: 5,
                value:3,
                slide: refreshSider,
//            change: refreshSwatch
            });
            $( "#amount" ).text( "2" );
//        $( "#blue" ).slider( "value", 25 );
//        $("#blue").ionRangeSlider({
//            min: 0,
//            max: 10,
//            type: 'single',
//            step: 0.1,
//            postfix: " 克",
//            prettify: false,
//            hasGrid: true
//        });
        });

    </script>
    <!--日历组件-->
    <script>
        var isFlag=false;
        var hiscalendar;
        var canlendarObj={};

        $(document).ready(function () {
            /* initialize the calendar
             -----------------------------------------------------------------*/
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();
//        {
//            title: '长事件',
//                start: new Date(y, m, d - 5),
//            end: new Date(y, m, d - 2),
//        },
            canlendarObj = {
                header: {
                    left: 'prev,next',
                    center: 'title',
//                right: 'month,agendaWeek,agendaDay,listMonth'
                    right: 'month,listMonth'
                },
//            defaultDate: '2017-05-12',
                locale: 'zh-cn',
                buttonIcons: false, // show the prev/next text
                navLinks: false, // can click day/week names to navigate views
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                contentHeight: 340,
                eventClick:canlendar_evensclick
            };
//        events:evens,
//        canlendarObj.events=canlendar_evens;
            $('#calendar').fullCalendar(canlendarObj);

        });
        //    获取历史数据
        function getHistory() {

        }
        //    更新日历数据 点击树查询数据切换到月
        function refcalendar() {
//        $("#h_c_car_id").val("1");
            //调用后台获取数据 获取carId下最近的数据
            var carId=$("#h_c_car_id").val();
            $.ajax({
                url: '/map/carMonth',
                dataType: 'json',
                type: "post",
                data: {
                    carId: carId,

                },
                success: function (data) { // 获取当前月的数据
                    var events = [];
                    if (data.success) {
//                    debugger;
                        var month = data.month;
                        $('#calendar').fullCalendar('changeView', 'month', month);
                        $('#calendar').fullCalendar( 'removeEventSource', canlendar_evens);
                        $('#calendar').fullCalendar( 'addEventSource', canlendar_evens);
                        $('#calendar').fullCalendar( 'refetchEvents' );
                    } else {
                        swal({
                            title: "系统提示",
                            text: data.msg,
                            type: "error"
                        });
                    }
                }
            });
//        $('#calendar').fullCalendar('changeView', 'month', month);

        }
        var canlendar_evensclick=function (event) {
//        debugger;
            var startTime=event.start.format('YYYY-MM-DD');
            var endTime=event.start.format('YYYY-MM-DD');
            var carId=event.carId;
            var status=$('[name="status"]').is(':checked');
            var accFlag=$('[name="accFlag"]').is(':checked');

            //刷新地图和列表数据
            queryCars(carId,startTime,endTime,status,accFlag);
            querywarnings(carId,startTime,endTime);
            refHisMap(carId,startTime,endTime,status,accFlag);

        }
        var canlendar_evens=function  (start, end, timezone, callback) {
            var date = this.getDate().format('YYYY-MM');
            var carId=$("#h_c_car_id").val();
            $.ajax({
                url: '/map/cardatas',
                dataType: 'json',
                type: "post",
                data: {
                    carId: carId,
                    date: date,
                },
                success: function (data) { // 获取当前月的数据
                    var events = [];
                    if (data.success) {
                        var resData = data.data;
                        $.each(resData, function (key, value) {
                            events.push({
                                title: value.mile,
                                carId: carId,
                                start: value.start
                                // will be parsed
//                            color: '#FFEBAC'
                            });
                        });
                    } else {
                        swal({
                            title: "系统提示",
                            text: data.msg,
                            type: "error"
                        });
                    }
                    callback(events);
                }
            });
        };

    </script>
    <script>
        $(function () {

            if(parent && parent.mainName && parent.mainName=="main"){
                parent.menuclick();
            }
        });

        //    function mapHeight() {
        //        debugger;
        ////        $("div_map").height(300);//直接设置元素的高
        ////        $("div_his").css("height", "300px");//通过设置CSS属性来设置元素的高
        //    }

        $('.collapse-link-1').click(function () {
            var ibox = $(this).closest('div.ibox');
            var button = $(this).find('i');
            var content = ibox.find('div.ibox-content');
            content.slideToggle(200);
            if(button.attr("class")=="fa fa-chevron-up"){
                $("#div_map_1").height(625);
                $("#div_map_2").height(550);
            }else{
                $("#div_map_1").height(730);
                $("#div_map_2").height(680);
            }
            button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
            ibox.toggleClass('').toggleClass('border-bottom');
            setTimeout(function () {
                ibox.resize();
                ibox.find('[id^=map-]').resize();
            }, 50);
        });
        function toDis(dis) {
            return Math.round(dis);
        }

        function openmap1() {

//        map.addEventListener("load",function(){
            myDis.open();  //开启鼠标测距
            //myDis.close();  //关闭鼠标测距大
//        });
        }
    </script>
    <script type="text/javascript">
        var carInfoTable;
        var isLoadingHistoryData = false;
        $(function () {
            var _bottomH = $(window).width()-251;
            $("#bottom-box").css({"width":_bottomH+"px"});
            carInfoTable = new BootstrapTable($('#carInfoDetailsTable'),{
                data:[],
                sidePagination: "client",
                pagination:false,
                singleSelect:false,
                height:210,
                onClickRow:function (row, $element,field) {
                    var e = row;
                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                    var driection = e.driection;
                    var driectionText = "北";
                    if(driection){
                        driectionText =  $.mapMethod.queryDriection(driection);
                    }
                     $("#map").find("span.carDirect").text(driectionText);
                    $("#map").find("span.carSpeed").text(e.speed);
                    $("#map").find("span.carTime").text(e.onlinetime);
                    $("#map").find("span.carAddress").text(e.address ? e.address : "暂无位置");

                    var carstatus = "在线停止状态";
                    if (e.onlineName == "0") {
                        carstatus = "离线";
                    }else if (e.onlineName == "1" && parseInt(e.speed) <10 ) {
                        carstatus = "停止"
                    } else if (e.onlineName == "1" && parseInt(e.speed) >= 10) {
                        carstatus = "行驶"
                    }else if(e.warningTypes == "3" || e.warningTypes == "5" || e.warningTypes == "8"){
                        carstatus = "异常"
                    }
                    var content = '<div class="ibox float-e-margins">' +
                        '<div class="">' +
                        '<h5>实时信息</h5>' +
                        '</div>' +
                        '<div class="ibox-content"> ' +
                        //                            '<div class="ibox-content ">' +
                        '车牌号：<span >' + e.baseCarNo  + '</span><br/>' +
                        '方向：<span >' + driectionText + '</span><br/>' +
                        '速度：<span >' + e.speed + '</span><br/>' +
                        '时间:<span >' + e.onlinetime + '</span><br/>' +
                        '状态:<span >' + carstatus + '</span><br/>' +
                        '位置:<span >' + e.address + '</span><br/>' +
                        '</div>';
                    addHismapMark(e.jd,e.wd,content);
                },
                columns: [
                    {
                        field: 'userName',
                        title: '车主姓名',
                        width:80
                    },
                    {
                        field: 'baseCarNo',
                        title: '车牌号',
                        width:100
                    }, {
                        field: 'terminal',
                        title: '设备编号',
                        width:100
                    },
                    //     {
                    //     field:"carType",
                    //     title:"设备类型"
                    // },
                    {
                        field: 'gpsDate',
                        title: '定位时间',
                        width:180
                    } ,
                    /*{
                     field: 'onlinetime',
                     title: '停车地点',
                     formatter:function (data) {
                     return "";
                     }
                     }, {
                     field: 'oneHigh',
                     title: '停车时长',
                     formatter:function (value,e,index) {
                     var gpsPowerStatus = e.gpsPowerStatus;
                     var acc = e.accFlag;
                     var oneHigh = e.oneHigh;
                     var sc=Math.floor(oneHigh/60) + "小时" + Math.floor(oneHigh%60) + "分" ;
                     var str=""
                     if(gpsPowerStatus == 1){
                     str="主电正常, "
                     }else{
                     str="主电异常, "
                     }
                     if (acc == 1) {
                     str = str+"点火, "
                     }else{
                     str = str+"熄火, "
                     }
                     if(oneHigh){
                     str=str+" 时长: "+sc
                     }else{
                     str=str+" 时长: 0 分钟"
                     }
                     return str
                     }
                     },*/


                    {
                        field: 'onlinetime',
                        title: '通信时间',
                        width:180
                    }, {
                        field: 'deptName',
                        title: '所属用户',
                        width:100
                    }, {
                        field: 'gps',
                        title: '定位状态',
                        width:45,
                        formatter:function (value,row,index) {
                            var e = row;
                            //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                            var gpsDate = e.gpsDate;
                            var onlinetime = e.onlinetime;
                            var result = "是";
                            if(gpsDate && onlinetime){
                                var totalMilliseconds = Math.abs(Date.parse(new Date(gpsDate)) - Date.parse(new Date(onlinetime)));
                                var totalMinutes=parseInt(totalMilliseconds / 1000 / 60);
                                if(totalMinutes>2){
                                    result="否"
                                }
                            }else{
                                result="否"
                            }
                            return result
                        }
                    },
                    /*{
                        field: 'addressDetail',
                        title: '定位',
                        width:65
                    },*/
                    /*{
                     field: 'status',
                     title: '激活状态',
                     formatter:function (value,row,index) {
                     var e = row;
                     //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                     var gpsPowerStatus = e.gpsPowerStatus;
                     var acc = e.accFlag;
                     var oneHigh = e.oneHigh;
                     var sc=Math.floor(oneHigh/60) + "小时" + Math.floor(oneHigh%60) + "分" ;
                     var str=""
                     if(gpsPowerStatus == 1){
                     str="主电正常, "
                     }else{
                     str="主电异常, "
                     }
                     if (acc == 1) {
                     str = str+"点火, "
                     }else{
                     str = str+"熄火, "
                     }
                     if(oneHigh){
                     str=str+" 时长: "+sc
                     }else{
                     str=str+" 时长: 0 分钟"
                     }
                     return str
                     }
                     },*/
                    {
                        field: 'speed',
                        title: '速度',
                        width:60
                    }, {
                        field: 'baojing',
                        title: '方向',
                        width:60,
                        formatter:function (value,row,index) {
                            var e = row;
                            //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                            var driection = e.driection;
                            if(driection){
                                return $.mapMethod.queryDriection(driection);
                            }else{
                                return "北"
                            }
                        }
                    },
//                    {
//                        field: 'daydis',
//                        title: '日里程',
//                    },
                    {
                        field: 'totalDis',
                        title: '总里程',
                        width:60,
                    },
//                    {
//                        field: 'monthDis',
//                        title: '温度',
//                        formatter:function (value,row,index) {
//                            return ""
//                        }
//                    },
//                    {
//                        field: 'monthDis',
//                        title: '当日油耗',
//                        formatter:function (value,row,index) {
//                            return ""
//                        }
//                    },
//                    {
//                        field: 'monthDis',
//                        title: '总油耗',
//                        formatter:function (value,row,index) {
//                            return ""
//                        }
//                    },
                    {
                        field: 'address',
                        title: '位置',
                        width:180
                    },
                    {
                        field: 'jd',
                        title: '经度',
                        width:150,
                    },
                    {
                        field: 'wd',
                        title: '纬度',
                        width:150,
                    }

                    //     {
                    //     field: 'Level',
                    //     title: '操作'
                    // }
                ]
                // columns: [{
                //     checkbox: true
                // }, {
                //     field: 'name',
                //     title: '关注'
                // }, {
                //     field: 'deptName',
                //     title: '设备名称'
                // }, {
                //     field: 'carType',
                //     title: '设备类型'
                // } , {
                //     field: 'baseCarNo',
                //     title: '设备ID'
                // }, {
                //     field: 'sim',
                //     title: 'SIM卡号'
                // }, {
                //     field: 'stopDate',
                //     title: '停车时间'
                // }, {
                //     field: 'stopLocation',
                //     title: '停车地点'
                // }, {
                //     field: 'stopTime',
                //     title: '停车时长'
                // }, {
                //     field: 'baojing',
                //     title: '报警'
                // }, {
                //     field: 'Level',
                //     title: '操作'
                // }]

            });
            carInfoTable.init();
            $("#bottom-top-arrow").on("click",function () {
                $("#bottom-box").animate({
                    "height":"0px"
                },600,function () {
                    $("#bottom-box").css({"display":"none"});
                });
            });
            $('#guijicheck').iCheck({
                checkboxClass: 'icheckbox_flat-red',
                radioClass: 'iradio_flat-red'
            });
            $('#guijicheck').on('ifChecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定
                $("#bottom-box").css({"display":"block"});
                $("#monitor-box-tab").css({"bottom":"248px"})
                $("#bottom-box").animate({
                    "height":"248px"
                },600,function () {
                    if(isLoadingHistoryData){
                        $('#carInfoDetailsTable').parent(".fixed-table-body").css({"height":"170px","maxHeight":"170px"});
                        $('#carInfoDetailsTable').css({"minWidth":"1366px"});
                    }
                });
                //$("#left-box").css({"maxHeight":(height-248)+"px","height":(height-248)+"px","overflowY":"auto"})
            });
            $('#guijicheck').on('ifUnchecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定
                $("#bottom-box").animate({
                    "height":"0px"
                },600,function () {
                    $("#bottom-box").css({"display":"none"});
                });
                //$("#left-box").css({"maxHeight":(height)+"px","height":(height)+"px","overflowY":"auto"})
                $("#monitor-box-tab").css({"bottom":"0px"})
            });
            $('#guijipoint').iCheck({
                checkboxClass: 'icheckbox_flat-red',
                radioClass: 'iradio_flat-red'
            });
            $('#showcankao').iCheck({
                checkboxClass: 'icheckbox_flat-red',
                radioClass: 'iradio_flat-red'
            });
            $('#pingbiSpeed').iCheck({
                checkboxClass: 'icheckbox_flat-red',
                radioClass: 'iradio_flat-red'
            });

//            $("#guijicheck").click(function () {
//                debugger;
//                if($(this).prop("checked") == true){
//                    //$(this).prop("checked","false");
//
//                }else{
//
//                }
//            });

            //loadHistoryData();

        });
        function loadHistoryData() {
            $.loadingBar.show("数据加载中...");
            $("#pointingNum").text(0);
            $("#totalPoint").text(0);
            $("#progressbar").progressBar();
            $("#progressbar-box").show();
            var carId=$("#h_c_car_id").val();
            var start=$("#start").val();
            var end=$("#end").val();
            var status = $('#pingbiSpeed').is(':checked');
            refHisMap(carId,start,end,status)
            $.ajax({
                url:"/monitor/queryHistotryInfo",
                data:{
                    "carId":$("#h_c_car_id").val(),
                    "startTime":$("#start").val(),
                    "endTime":$("#end").val(),
                    "status":$('#pingbiSpeed').is(':checked')
                },
                type:"POST",
                dataType:"JSON"
            }).done(function (result) {
                if (result.isSuccess == true) {
                    var dataArr = [];
                    var resData = result.data;
                    if(resData){
                        carInfoTable.load(resData);
                        isLoadingHistoryData = true;
                        $('#carInfoDetailsTable').css({"minWidth":"1366px"})
                    }
//                    var carId=$("#h_c_car_id").val();
//                    var start=$("#start").val();
//                    var end=$("#end").val();
                    //var status=$('[name="status"]').is(':checked');
//                    var status = $('#pingbiSpeed').is(':checked');
//                    refHisMap(carId,start,end,status)
//                    queryCars(carId,start,end,status);
//                    querywarnings(carId,start,end);
                }
            }).fail(function (error) {

            })
        }
    </script>
</body>

</html>
